<template>
  <a-form ref="formRef" :model="infoData" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item ref="title" label="事件名称" name="title">
      <a-input v-model:value="infoData.title" placeholder="请输入事件名称" />
    </a-form-item>
    <a-form-item label="事件日期" required name="date">
      <a-input v-model:value="infoData.date" placeholder="请填写事件日期，如：2022-01-01" />
    </a-form-item>
    <a-form-item label="事件状态" name="status">
      <a-select v-model:value="infoData.status" placeholder="请选择状态">
        <a-select-option :value="1">未开始</a-select-option>
        <a-select-option :value="2">进行中</a-select-option>
        <a-select-option :value="3">已结束</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="事件类型" name="type">
      <a-radio-group v-model:value="infoData.type" @change="changeType">
        <a-radio :value="1">报名</a-radio>
        <a-radio :value="2">面试</a-radio>
        <a-radio :value="3">其他事件</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-bind="formItemLayoutButton">
      <a-button v-if="infoData.type != 1 && infoData.type != 2" disabled>无需选择事件</a-button>
      <div v-else>
        <a-button @click="addEvent">选择对应的{{ infoData.type === 1 ? '问卷' : '面试' }}</a-button> 选择了：{{
          infoData.event_title ? (chosTitle == '' ? infoData.event_title : chosTitle) : infoData.event_title
        }}
      </div>
    </a-form-item>
    <choose-paper-event ref="openPaperModal" @chosTitle="tochosTitle" />
    <choose-interview-event ref="openInterviewModal" @chosTitle="tochosTitle" />
  </a-form>
</template>
<script lang="ts">
import { defineComponent, ref, Ref } from 'vue'
import ChoosePaperEvent from '../chooseDetail/ChoosePaperEvent.vue'
import ChooseInterviewEvent from '../chooseDetail/ChooseInterviewEvent.vue'

interface EmitType {
  id: number | undefined
  title: string
  start_time?: string
  end_time?: string
  status?: number
  count?: number
  create_by?: string
  create_time?: string
}

// 选择问卷
const useRefPaperChildEffect = () => {
  const openPaperModal = ref()
  const openPaperCheckoutModal = () => {
    openPaperModal.value.showModal()
  }
  return { openPaperModal, openPaperCheckoutModal }
}

// 选择面试
const useRefInterviewChildEffect = () => {
  const openInterviewModal = ref()
  const openInterviewCheckoutModal = () => {
    openInterviewModal.value.showModal()
  }
  return { openInterviewModal, openInterviewCheckoutModal }
}

// 表单数据相关
const useFormDataEffect = (props: any) => {
  const formRef = ref()
  const rules = {
    title: [{ required: true, message: '事件名称不能为空', trigger: 'blur' }],
    type: [{ required: true, message: '请选择事件类型', trigger: 'blur' }]
  }
  const formItemLayoutButton = {
    wrapperCol: {
      xs: { span: 20, offset: 5 },
      sm: { span: 50, offset: 4 }
    }
  }
  const formItemLayoutWithOutLabel = {
    wrapperCol: {
      xs: { span: 20, offset: 5 },
      sm: { span: 50, offset: 2 }
    }
  }
  const changeType = () => {
    if (props.infoData.type === 3) {
      props.infoData.event_id = -1
    } else {
      props.infoData.event_id = undefined
    }
  }
  return {
    formRef,
    formItemLayoutButton,
    formItemLayoutWithOutLabel,
    rules,
    changeType
  }
}

// 表单相关的逻辑
const useFormLogicEffect = (formRef: Ref<any>, props: any) => {
  const chosTitle = ref<string>('')
  const { openPaperModal, openPaperCheckoutModal } = useRefPaperChildEffect()
  const { openInterviewModal, openInterviewCheckoutModal } = useRefInterviewChildEffect()
  const reset = () => {
    formRef.value.resetFields()
  }
  const addEvent = () => {
    if (props.infoData.type === 1) {
      openPaperCheckoutModal()
    } else if (props.infoData.type === 2) {
      openInterviewCheckoutModal()
    }
  }
  const tochosTitle = (e: EmitType) => {
    chosTitle.value = e.title
    props.infoData.event_id = e.id
  }
  return {
    chosTitle,
    openInterviewModal,
    openPaperModal,
    reset,
    addEvent,
    tochosTitle
  }
}

// 调用父组件的方法
const useEmitParentEffect = (props: any, ctx: any) => {
  const addItem = () => {
    ctx.emit('addItem')
    console.log('addItem', props.index)
  }
  const removeItem = () => {
    ctx.emit('removeItem')
    console.log('removeItem', props.index)
  }
  return { addItem, removeItem }
}

export default defineComponent({
  components: {
    ChoosePaperEvent,
    ChooseInterviewEvent
  },
  props: ['index', 'infoData', 'isDisabled'],
  emits: ['addItem', 'removeItem'],
  setup(props, ctx) {
    const {
      formRef,
      formItemLayoutButton,
      formItemLayoutWithOutLabel,
      // getDate,
      rules,
      changeType
    } = useFormDataEffect(props)

    const { chosTitle, reset, addEvent, openPaperModal, openInterviewModal, tochosTitle } = useFormLogicEffect(formRef, props)

    const { addItem, removeItem } = useEmitParentEffect(props, ctx)

    return {
      formRef,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      formItemLayoutButton,
      formItemLayoutWithOutLabel,
      tochosTitle,
      // getDate,
      rules,
      changeType,
      chosTitle,
      reset,
      addEvent,
      openPaperModal,
      openInterviewModal,
      addItem,
      removeItem
    }
  }
})
</script>

<style lang="less" scoped></style>
